import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Demo", style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.blue,
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    // 获取屏幕的宽高
    return Stack(
      children: [
        ListView(
          padding: EdgeInsets.all(10),
          children: [
            Text(
              "热搜",
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            Divider(),
            Container(
              padding: EdgeInsets.all(10),
              child: Wrap(
                spacing: 20,
                runSpacing: 10,
                children: [
                  Button("女装", onPressed: () {}),
                  Button("女装", onPressed: () {}),
                  Button("笔记本电脑", onPressed: () {}),
                  Button("女装111", onPressed: () {}),
                  Button("女装", onPressed: () {}),
                  Button("女装", onPressed: () {}),
                  Button("女装", onPressed: () {}),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "历史记录",
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            Divider(),
            Column(
              children: [
                ListTile(title: Text("女装")),
                Divider(),
                ListTile(title: Text("女装")),
                Divider(),
                ListTile(title: Text("女装")),
                Divider(),
                ListTile(title: Text("女装")),
                Divider(),
              ],
            )
          ],
        ),
        Positioned(
          left: 100,
          bottom: 50,
          child: OutlinedButton.icon(
              style: ButtonStyle(
                  foregroundColor: WidgetStateProperty.all(Colors.black87),
                  shape: WidgetStateProperty.all(RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(1)))),
              onPressed: () {},
              icon: Icon(
                Icons.delete,
                color: Colors.black87,
              ),
              label: Text("清空历史记录")),
        )
      ],
    );
  }
}

class Button extends StatelessWidget {
  String text; // 按钮的文字
  void Function()? onPressed; // 方法
  Button(this.text, {super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: ElevatedButton(
          style: ButtonStyle(
              shape: WidgetStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8))),
              backgroundColor:
                  WidgetStateProperty.all(Color.fromARGB(211, 230, 226, 226)),
              foregroundColor: WidgetStateProperty.all(Colors.black45)),
          onPressed: onPressed,
          child: Text(text)),
    );
  }
}
